/* 客户等级权益-导入记录
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\CustomerManage\RightsAndInterests\component\a.tsx
 * @Date: 2021-12-07 12:13:35
 * @LastEditTime: 2021-12-07 12:13:36
 */
import React from 'react'
import { UdTable, UdFilter, columnRenders, http, UdToolbar, UdDrawer } from '@/lib'
import { Select, Spin, Button, Input } from 'antd'
import comApis from '@/apis'
import UdSelect from '@/components/UdFormControls/UdSelect'
import apis from '@/apis/CustomerManage'
import { downBlobFile } from '@/utils/methods'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import _ from 'lodash'
import ImportRecordDetail from './ImportRecordDetail'
import dayjs from 'dayjs'
const { Option } = Select

export default class ImportRecord extends React.Component<IProps, IState> {
  protected filterForm: WrappedFormUtils = {} as WrappedFormUtils
  private brandList: any[] = this.props.brandList
  private yearList: any[] = this.props.yearList
  private STATUS_ENUM: any = {
    AUDITING: '审核中',
    AUDITFAIL: '已拒绝',
    AUDITSUCC: '已通过',
  }
  private conditions: any = [
    {
      label: '品牌公司',
      id: 'brandCode',
      initialValue: this.brandList[0].value,
      render: <UdSelect showSearch allowClear={false} options={this.brandList} />,
    },

    {
      label: '评级年度',
      id: 'appraiseYear',
      initialValue: dayjs().year() + '',
      render: () => (
        <UdSelect options={this.yearList} showSearch={true} allowClear={false} optionFilterProp="children" />
      ),
    },
    // {
    //   id: 'approvalStatus',
    //   label: '审批状态',
    //   render: () => (
    //     <Select>
    //       <Option value="AUDITING">审核中</Option>
    //       <Option value="AUDITFAIL">已拒绝</Option>
    //       <Option value="AUDITSUCC">已通过</Option>
    //     </Select>
    //   ),
    // },
  ]
  private columns: any = [
    ['序号', 'id', (text, record, index) => index + 1, { width: '50px' }],
    { title: '文件', dataIndex: 'fileName', minWidth: '120px' },
    { title: '品牌公司', dataIndex: 'brandName', minWidth: '120px' },
    { title: '评价年度', dataIndex: 'appraiseYear', minWidth: '120px' },
    // {
    //   title: '审核状态',
    //   dataIndex: 'approvalStatus',
    //   minWidth: '120px',
    //   render: (text, record) => {
    //     return this.STATUS_ENUM[record.approvalStatus] || ''
    //   },
    // },
    { title: '操作人', dataIndex: 'createName', minWidth: '100px' },
    { title: '申请时间', dataIndex: 'createTime', minWidth: '120px' },
    {
      title: '操作',
      dataIndex: 'operate',
      minWidth: '40px',
      render: columnRenders.operate([{ title: '查看', action: (text, record) => this.handleDetails(record) }]),
    },
  ]
  private tableProps: any = { rowKey: 'id' }

  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
      searchValues: {},
      page: 1,
      size: 10,
      total: 0,
      loading: false,
      uploading: false,
      downloading: false,
      stageYearList: [],
    }
  }

  render() {
    return (
      <Spin
        spinning={this.state.uploading || this.state.downloading}
        tip={this.state.uploading ? '上传中，请稍后...' : '下载中，请稍后...'}
      >
        <UdFilter
          getForm={form => {
            this.filterForm = form
          }}
          items={this.conditions}
          onSearch={values => {
            this.handleSearch(values)
          }}
          loading={this.state.loading}
          resetAfter={this.resetFilterHandle}
        />
        <UdTable
          columns={this.columns}
          dataSource={this.state.dataSource}
          onChange={this.handleChangePage}
          {...this.tableProps}
          pagination={{
            current: this.state.page,
            pageSize: this.state.size,
            total: this.state.total,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40'],
            showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
          }}
        ></UdTable>
      </Spin>
    )
  }

  public componentDidMount() {
    this.getImportRecordTableData()
  }

  public handleDetails = (record: any) => {
    UdDrawer.open({
      title: '导入记录详情',
      width: '50%',
      content: <ImportRecordDetail record={record} />,
      footer: null,
    })
  }

  private handleChangePage = pagination => {
    const { current: page, pageSize: size } = pagination
    this.setState({ page, size }, () => {
      this.getImportRecordTableData()
    })
  }
  private handleSearch = (values: any) => {
    this.setState({ searchValues: values, page: 1 }, () => {
      this.getImportRecordTableData()
    })
  }

  private resetFilterHandle = (form: WrappedFormUtils) => {
    this.setState({ dataSource: [], page: 1, total: 0, searchValues: form.getFieldsValue() }, () => {
      this.getImportRecordTableData()
    })
  }

  private getImportRecordTableData = async () => {
    this.setState({ loading: true })
    try {
      let list: any = await http.post(apis.getImportRecordList, {
        page: this.state.page,
        size: this.state.size,
        conditions: {
          brandCode: this.brandList[0].value,
          appraiseYear: dayjs().year() + '',
          ...this.state.searchValues,
        },
      })
      const dataSource = list.data?.content

      this.setState({
        dataSource,
        page: list.data.number,
        size: list.data.size,
        total: list.data.totalElements,
        loading: false,
      })
    } catch (error) {
      this.setState({
        loading: false,
      })
    }
  }
}

interface IProps {
  brandList: any[]
  yearList: any[]
}
interface IState {
  dataSource?: any[]
  searchValues?: {}
  page?: any
  size?: any
  total?: any
  loading?: boolean
  uploading?: boolean
  downloading?: boolean
  stageYearList: any[]
}
